<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>日历</title>
    <style>
    *{margin:0;padding:0}
#calendar{width:350px;margin:100px auto; overflow:hidden;border:1px solid #000; padding:20px; position:relative}
#calendar h4{ text-align:center; margin-bottom:10px}
#calendar .a1{ position:absolute;top:20px;left:20px;}
#calendar .a2{ position:absolute;top:20px;right:20px;}
#calendar .week{height:30px; line-height:20px;border-bottom:1px solid #000; margin-bottom:10px}
#calendar .week li{ float:left;width:50px;height:30px; text-align:center; list-style:none;}
#calendar .dateList{ overflow:hidden; clear:both;background:lightgray;}
#calendar .dateList li{float:left;width:48px;height:28px; text-align:center; line-height:30px;list-style:none; 
border:1px solid hsla(240, 100%, 75%,0.2);
}
#calendar .dateList .ccc{ color:black;}
#calendar .dateList .red{ background:#F90; color:#fff;}
#calendar .dateList .sun{ color:#f00;}
#calendar .dateList .last{ color:gray;}
#calendar .dateList .next{ color:green;}

    </style>
</head>

<body>
    <div id="calendar">
        <h4 id="title"></h4>
        <a href="javascript:;" class="a1" id="prev">上月</a>
        <a href="javascript:;" class="a2" id="next">下月</a>
        <ul class="week">
            <li>日</li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
        </ul>
        <ul class="dateList" id="dateList"></ul>
    </div>
    <script>
    var n = 0;
    var ul = document.getElementById('dateList');
    ca();
    document.getElementById('next').onclick = function () {
        n++;
        ca();
    }
    document.getElementById('prev').onclick = function () {
        n--;
        ca();
    }

    var t = document.querySelector('#title');

    console.log(t);

    t.onclick = function () {
        console.log(ul.childNodes.length)
        for(var j = 0; j < ul.childNodes.length; j++)
        ul.removeChild(ul.childNodes[j])

        



        // for(var i = 1;i <= 12; i++) {
        //     var li = document.createElement('li');
        //     li.innerHTML = i + '月'
        //     ul.appendChild(li);
        // }
        

    }
    







/********************************/
    function ca () {
    var date = new Date();
    date.setMonth(date.getMonth() + n);
    var str = '';
    var title = date.getFullYear() + '年' + (date.getMonth() + 1) + '月';
    document.getElementById('title').innerHTML = title;


    


    var today = date.getDate();

    date.setDate(1);

    var week = date.getDay();

    date.setMonth(date.getMonth() + 1, 0)

    var daysum = date.getDate();
    


    var last = new Date();
    var preday;
    //last.setMonth(last.getMonth() + n);

    last.setMonth(last.getMonth()+n,0)
    var presum = last.getDate();
    //last.setMonth(last.getMonth(),presum - week);
    last.setDate(presum - week);
    //console.log(presum);
    if(week === 0) {
        preday = presum - 6;
    }
    else {
        preday = last.getDate() + 1;
    }

    console.log(preday)

    console.log(presum)

    //console.log(last.getDate())

    console.log(presum - preday + 1)
    
    console.log(daysum)

    // for(var i = 0; i < week; i++) {
    //     str += '<li></li>'
    // }
    for(var j = preday; j <= presum; j++) {
            str += '<li class = "last">' + j + '</li>'
        }




    for(var j = 1; j <= daysum; j++) {
        if(n < 0) {
            str += '<li class = "ccc">' + j + '</li>';
        }
        else if (n === 0) {
            if(j < today) {
            str += '<li class = "ccc">' + j + '</li>';
        }
        else if(j === today) {
            str += '<li class = "red">' + j + '</li>';
        }
        else if((week + j) % 7 === 0 || (week + j) % 7 ===1) {
            str += '<li class = "sun">' + j + '</li>';
        }//周末
        else {
            str += '<li>' + j + '</li>';
        }
        }
        else {
            if((week + j) % 7 === 0 || (week + j) % 7 ===1) {
            str += '<li class = "sun">' + j + '</li>';
        }
        else {
            str += '<li>' + j + '</li>';
        }
    }
    }


    for(var i = 1; i <= (42 - (presum - preday + 1 + daysum));i++) {
        str += '<li class = next>' + i + '</li>';
    }


    ul.innerHTML = str;


    var li = document.querySelectorAll('.dateList li')
    console.log(li)

    Array.from(li).forEach(function (item, index) {
        item.onmouseover = function () {
            // item.style.background = 'skyblue'
            item.style.border = '1px solid hsla(240, 100%, 75%,1)'
        }
            item.onmouseout = function () {
                // item.style.background = 'lightgray'
            item.style.border = '1px solid hsla(240, 100%, 75%,0.2)'
            }
    })


    }











    </script>
</body>

</html>